<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="system-user-search mb15">
        <div class="flex gap-4 mb-4">
          <span style="margin-top: 5px;color: #606266;">加载最小时长：</span>
          <el-input v-model="state.tableData.param.miat" size="default" placeholder="加载最小时长" style="max-width: 180px"> </el-input>


          <span  style="margin-left: 30px;margin-top: 5px;color: #606266;">加载最大时长：</span>
          <el-input v-model="state.tableData.param.maat" size="default" placeholder="加载最大时长" style="max-width: 180px"> </el-input>
          <el-button size="default" type="primary" class="ml10"  @click="changeEchart">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
          <el-button size="default"  class="ml10"   @click="resetQuery">
            <el-icon><ele-Refresh /></el-icon>重置
          </el-button>
        </div>

			</div>

      <div ref="EcharRef" style="width: 100%;height: 500px;">

      </div>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[5,10, 20, 30]"
				v-model:current-page="state.tableData.param.pageNum"
				background
				v-model:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</div>
<!--		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />-->
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive,Ref, onMounted, ref ,nextTick} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { markRaw } from 'vue';
import * as echarts from 'echarts';
import {getDst, getGitee, getDHCC, getLocat} from '/@/api/cec/bdst';
// import request from '/@/utils/request';
// import dataTool from "echarts/extension/dataTool";
// echarts.dataTool=require('echarts/dist/extension/dataTool.js')
// 引入组件
// const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));

// 定义变量内容
// const roleDialogRef = ref();
const echart=reactive({
  data: [
    [1206.5, 2142, 1429, 1136, 1710.75],
    [1041, 2280, 1149, 1023, 1883],
    [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
    [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
    [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
  ],
})
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
    xAxisArr:[],
    delaysPth:[],
    dataSet:[],
		param: {
			search: '',
			pageNum: 1,
			pageSize: 5,
      miat:null,
      maat:null,
		},
	},
});


// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
  changeEchart();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
  changeEchart();
};
//重置
const resetQuery=()=>{
  state.tableData.param.miat='';
  state.tableData.param.maat='';
  changeEchart();
}
const EcharRef=ref();
// const EchartObj = markRaw(echarts.init(EcharRef.value));
const option = ref(
    {
      title: [
        {
          text: '时延分布',
          left: 'center'
        },
        {
          //text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
          borderColor: '#999',
          borderWidth: 1,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            lineHeight: 20
          },
          left: '10%',
          top: '90%'
        }
      ],
      /*dataset: [
        {
          source: echart.data
        },
        {
          transform: {
            type: 'boxplot',
            config: {
              itemNameFormatter: function (params:any) {
                //return 'expr ' + params.value;
                return state.tableData.xAxisArr[params.value]
              }
            }
            //config: { itemNameFormatter: 'expr {value}' }
          }
        },
        {
          fromDatasetIndex: 1,
          fromTransformResult: 1
        }
      ],*/
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (param:any,index:any) {
          let i=index.replace("item_boxplot_","");
          return [
            ' 延迟：' + state.tableData.xAxisArr[i] + ' 次 ',
            '上限: ' + param.data[1]+' ms',
            '上四分位数: ' + param.data[2]+' ms',
            '中位数: ' + param.data[3]+' ms',
            '下四分位数: ' + param.data[4]+' ms',
            '下限: ' + param.data[5]+' ms',
            '请求路径：'+state.tableData.delaysPth[i]
          ].join('<br/>');
        }
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '5%'
      },
      xAxis: {
        type: 'category',
        name: '次',
        //data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        boundaryGap: true,
        nameGap: 30,
        splitArea: {
          show: false
        },
        axisLabel: {
          formatter: function (value:any) {
            return state.tableData.xAxisArr[value]
          },//"expr {value}"
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        name: '毫秒 ms',
        splitArea: {
          show: true
        }
      },

      series: [
        {
          name: 'boxplot',
          type: 'boxplot',
          datasetIndex: 1,
          data: [
            /*[655, 850, 940, 980, 1070],
            [760, 800, 845, 885, 960],
            [780, 840, 855, 880, 940],
            [720, 767.5, 815, 865, 920],
            [3, 3, 4, 4,6]*/
          ] as any[],

        }/*,
        {
          name: 'outlier',
          type: 'scatter',
          datasetIndex: 2
        }*/
      ]
    }
);


let myChart:any = null;
//绘制 箱盒图
// const drawChart = () => {
//
//   option.value && myChart.setOption(option.value);
//   window.onresize = function () { // 自适应大小
//     myChart.resize();
//   }
// }

//获取数据 echart数据
const changeEchart  = async() => {

  state.tableData.param.miat=state.tableData.param.miat==''?null:state.tableData.param.miat;
  state.tableData.param.maat=state.tableData.param.maat==''?null:state.tableData.param.maat;
  //分页 + 查询条件
  /*let result={
        "code": 0,
        "data": {
          "info": [
            {
              "delays_low": 1206.5,
              "delays_max": 2142,
              "delays_med": 1429,
              "delays_min": 1136,
              "delays_num": 12,
              "delays_pth": "/api/workflow/reqform/loadForm",
              "delays_upp": 1710.75
            },
            {
              "delays_low": 1041,
              "delays_max": 2280,
              "delays_med": 1149,
              "delays_min": 1023,
              "delays_num": 9,
              "delays_pth": "/mobilemode/mobile/server.jsp",
              "delays_upp": 1883
            },
            {
              "delays_low": 3,
              "delays_max": 6,
              "delays_med": 4,
              "delays_min": 3,
              "delays_num": 96,
              "delays_pth": "/mobilemode/mobile/server.jsp",
              "delays_upp": 4
            }

          ],
          "page": 1,
          "size": 2,
          "tota": 17
        },
        "msgs": "ok"
      }
  ;*/

  let result= await getDst({size:state.tableData.param.pageSize,page:state.tableData.param.pageNum,miat:state.tableData.param.miat,maat:state.tableData.param.maat});

  const {code,data,msgs}=result;
  state.tableData.total=data.tota;
  let bigArr:any[]=[];
  let numArr:any[]=[];
  let pathArr:any[]=[];
  if(code==0){
    data.info.forEach((item:any)=>{
      let arrItem:any[]=[];
      arrItem.push(item.delays_max);
      arrItem.push(item.delays_upp);
      arrItem.push(item.delays_med);
      arrItem.push(item.delays_low);
      arrItem.push(item.delays_min);
      bigArr.push(arrItem)
      numArr.push(item.delays_num);
      pathArr.push(item.delays_pth);
    })
    state.tableData.xAxisArr=numArr;
    state.tableData.delaysPth=pathArr;
  }
  // option.value.dataset[0].source=bigArr;
  option.value.series[0].data=bigArr;
  // state.tableData.dataSet=bigArr;
  myChart.setOption(option.value, true)


};

// 页面加载时
onMounted(() => {
  // getDataList();
  // //5.创建echarts初始化对象
  // const myEcharts = echarts.init(EcharRef.value);
  //6.校验表结构是否存在,存在就渲染
  // EchartObj.setOption(option);
  // 初始化ECharts实例
  nextTick(() => {
    myChart = echarts.init(EcharRef.value);
    changeEchart()
    window.onresize = function () { // 自适应大小
      myChart.resize();
    }
  })

});
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
</style>
